<template>
	<view>
		<view class="address">
			<van-notice-bar
			  scrollable 
			  background="#e9e9ea"
			  color="#30353a"
			  left-icon="volume-o"
			  text="双12活动期间,商品的需增,下单的商品可能延迟发货,敬请谅解,谢谢。"
			/>
		</view>
		<view class="title-note" v-if="order.status == 0">
			<view class="big-w">待付款</view>
			<view class="small-w">好的商品，好的优购，期待你的下单。</view>
		</view>
		<view class="title-note" v-else>
			<view class="big-w">交易成功</view>
			<view class="small-w">好的优购，好的收货，期待您的下次光临</view>
		</view>
		<view class="du clearfix">
			<view class="info left">
				<image src="/static/me/address.png" mode="aspectFill" class="place-img1"></image>
			</view>
			<view class="info2 left">
				<view class="info-item">
					<view class="item1 item-left">
						<text>收货人:</text>
						<text class="name1">{{order.address.username}}</text>
					</view>
					<view class="item1 item-right">
						<text class="phone1">{{userphone | yinPhone}}</text>
						<image src="/static/image/right.png" mode="aspectFill" class="right-box" @click="toAddress"></image>
					</view>
				</view>
				<view class="adre">
					<text>{{order.address.useradress}}</text>
				</view>
			</view>
		</view>
		<view class="goods-detail clearfix">
			<view class="left">
				<image :src="order.goodsInfo.imgUrl"
					   mode="aspectFill"
					   class="goods-img"
					   ></image>
			</view>
			<view class="left right-box">
				<view class="xian-detail">
					<text>{{order.goodsInfo.detail}}</text>
				</view>
				<view class="gu-box">
					<text class="gui">{{order.goodsInfo.color}}</text>
					<text class="gui">数量x{{order.num}}</text>
					<text class="gui">{{order.goodsInfo.size}}</text>
				</view>
				<view>
					<text class="small-b">￥</text>
					<text class="big-b">{{order.goodsInfo.money}}</text>
				</view>
			</view>
		</view>
		<view class="pay-box clearfix">
			<view class="left color1">待支付</view>
			<view class="right">
				<text class="sm-p">￥</text>
				<text class="bi-p">{{order.goodsInfo.money}}</text>
			</view>
			
		</view>
		<view class="orderinfo">
			<view class="clearfix">
				<view class="left color1">订单编号</view>
				<view class="right color1">
					<text>{{order.orderNumber}}</text>
				</view>
				
			</view>
			<view class="clearfix time">
				<view class="left  color1">创建时间</view>
				<view class="right color1">
					<text>{{order.time}}</text>
				</view>
			</view>
		</view>
		<view class="bottom-p clearfix">
			<van-button type="primary" class="right po" v-if="!order.status" @click="pay">立即支付</van-button>
			<van-button type="default" plain class="right" @click="del">删除订单</van-button>
		</view>
		<!-- 弹出框 -->
		<van-dialog id="van-dialog"/>
		<view class="pp">
			<van-toast id="van-toast" />
		</view>
	</view>
</template>

<script>
	import Dialog from '@/wxcomponents/vant/dialog/dialog'
	import Toast from '../../wxcomponents/vant/toast/toast'
	import { mapGetters, mapActions } from 'vuex'
	export default {
		data() {
			return {
				order: [],
				userphone:'',
				isShowOrder: false     //是否显示下单按钮
			};
		},
		filters:{
			yinPhone(tel) {
				tel = "" + tel;
				let tel1 = tel.substr(0,3) + "****" + tel.substr(7)
				return tel1
			}
		},
		computed: {
			...mapGetters(['getallOrder']),
		},
		methods: {
			toAddress() {
				
			},
			...mapActions({
				getOrderData: 'getOrderData'
			}),
			pay() {
				let id = this.order.address.id
				let obj = this.order.goodsInfo
				uni.setStorageSync('goodsInfo', JSON.stringify(obj))
				uni.navigateTo({
					url: '/pages/commitOrder/commitOrder?id='+id
				})
			},
			del() {
				let id = this.order._id
				Dialog.confirm({
				  title: '温馨提示',
				  message: '是否删除此订单',
				}).then(() => {    //点击确定删除
					uni.showLoading({
						title: '处理中...'
					})
					uniCloud.callFunction({
						name: 'order',
						data: {
							type: 'delete1',
							id: id
						}
					}).then(res => {
						console.log(res);
						if(res.success) {
							uni.hideLoading()
							Toast.fail({
							  duration: 0, // 持续展示 toast
							  forbidClick: true,
							  message: '删除成功',
							  selector: '#van-toast',
							});
							setTimeout(function(){
								uni.navigateBack({
									delta: 1
								})
							},3000)
						}
					})
				})
				
			}
		},
		onLoad(option) {
			let id = option.id
			for(let i = 0; i < this.getallOrder.length; i++) {
				if(id == this.getallOrder[i]._id) {
					this.order = this.getallOrder[i]
				}
			}
			this.userphone = this.order.address.userphone
		},
		onShow() {
			this.getOrderData()
		}
	}
</script>

<style lang="scss" scoped>
	.title-note {
		width: $uni-width;
		height: 130rpx;
		background-color: #2b2c3c;
		padding: 20rpx 30rpx;
	}
	.big-w {
		font-size: 45rpx;
		color: white;
	}
	.small-w {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: white;
	}
	.du {
		background-color: white;
		padding: 30rpx 30rpx;
		box-sizing: border-box;	
		border-bottom: 12rpx solid #f5f5f9;
		.info2 {
			width: 620rpx;
			height: 100rpx;
			margin-left: 20rpx;
		}
		.info-item {
			
			display: flex;
			.item1 {
				flex: 1;
			}
			.item-left {
				text-align: left;
			}
			.item-right {
				text-align: right;
			}
			.name1 {
				margin-left: 20rpx;
			}
			.phone1 {
				margin-right: 20rpx;
			}
			.right-box {
				width: 40rpx;
				height: 40rpx;
				vertical-align: bottom;
			}
			
		}
	}
	.place-img1 {
		width: 50rpx;
		height: 50rpx;
	} 
	.goods-detail {
		width: $uni-width;
		height: 210rpx;
		margin-top: 10rpx;
		padding-bottom: 10rpx;
		padding: 20rpx;
		background-color: white;
		box-sizing: border-box;
		border-bottom: 12rpx solid #f5f5f9;
		.goods-img {
			width: 160rpx;
			height: 160rpx;
		}
		.right-box {
			margin-left: 20rpx;
			width: 520rpx;
		}
		.gu-box {
			margin: 10rpx 0;
			color: #8c949d;
			.gui {
				margin-right: 10rpx;
			}
		}
		.small-b {
			font-size: 24rpx;
		}
		.big-b {
			font-size: 32rpx;
			font-weight: 500;
		}
		
	}
	.xian-detail {
		width: 560rpx;
		height: 80rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.pay-box {
		width: $uni-width;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 12rpx solid #f5f5f9;
		.sm-p {
			font-size: 20rpx;
		}
		.bi-p {
			font-size: 40rpx;
		}
	}
	.orderinfo {
		padding: 20rpx 30rpx;
		.time {
			margin-top: 15rpx;
		}
	}
	.color1 {
		color: #a7a7a7;
	}
	.bottom-p {
		position: fixed;
		width: $uni-width;
		height: 130rpx;
		border-top: 2rpx solid #ddd;
		line-height: 130rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		bottom: 0;
		.po {
			margin-left: 20rpx;
		}
	}
	.pp {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 100;
	}
</style>
